<template>
    <!-- 多选框 -->
    <!-- <div class="multiple-select-cell"> -->
    <van-cell
        class="select-cell"
        is-link
        v-model:value="titleModelValue"
        @click="showPicker = !formProp.readonly">
        <template #title>
            <span
                v-if="formProp.isrequired"
                class="red">*</span>
            <span>{{formProp.label}}</span>
        </template>
    </van-cell>
    <van-popup
        round
        v-model:show="showPicker"
        position="bottom">
        <div class="van-picker__toolbar">
            <button
                type="button"
                class="van-picker__cancel"
                @click="onCancel">{{$st('wp_Cancel')}}</button>
            <!-- <div class="van-ellipsis van-picker__title">{{$attrs.label}}</div> -->
            <button
                type="button"
                class="van-picker__confirm"
                @click="onConfirm">{{$st('wp_confirm')}}</button>
        </div>
        <van-checkbox-group v-model="checked">
            <van-cell-group>
                <van-cell
                    v-for="(item, index) in formProp.columns"
                    clickable
                    :key="item"
                    :title="`${item}`"
                    @click="toggle(index)"
                >
                    <template #right-icon>
                        <van-checkbox
                            :name="item"
                            :ref="el => checkboxRefs[index] = el"
                            @click.stop
                        />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-checkbox-group>
    </van-popup>
    <!-- </div> -->
</template>
<script>
import { ref, onBeforeUpdate, onUpdated, onMounted } from 'vue';
import { selfI18n } from '@/i18n';

export default {
    props: {
        modelValue: Array,
        // 表单配置项
        formProp: Object
    },
    emits: ['update:modelValue'],
    setup (props, context) {
        const $st = selfI18n;

        const showPicker = ref(false);
        const titleModelValue = ref($st('wp_Please_choose'));
        const checked = ref(props.modelValue || []);
        const checkboxRefs = ref([]);
        const toggle = (index) => {
            checkboxRefs.value[index].toggle();
        };
        const onCancel = () => {
            showPicker.value = false;
        };
        const onConfirm = () => {
            console.log(checked);
            context.emit('update:modelValue', checked.value);
            showPicker.value = false;
        };
        onBeforeUpdate(() => {
            checkboxRefs.value = [];
        });
        onUpdated(() => {
            console.log('multi:' + props.modelValue);
            titleModelValue.value = props.modelValue && props.modelValue.length !== 0 ? props.modelValue.join(',') : $st('wp_Please_choose');
            checked.value = props.modelValue || [];
        });
        onMounted(() => {
            console.log('onMounted multi:' + props.modelValue);
            titleModelValue.value = props.modelValue && props.modelValue.length !== 0 ? props.modelValue.join(',') : $st('wp_Please_choose');
            checked.value = props.modelValue || [];
        });
        return {
            titleModelValue,
            showPicker,
            toggle,
            checked,
            checkboxRefs,
            onCancel,
            onConfirm
        };
    }
};
</script>
<style lang="scss">
//   .multiple-select-cell {
    // .van-cell__title{
    //     opacity: 1;
    //     font-size: 17px;
    //     font-weight: Normal;
    //     text-align: left;
    //     color: #000000;
    // }
    .red{
        color:red;
    }
    .select-cell{
        .van-cell__title{
        opacity: 1;
        font-size: 17px;
        font-weight: Normal;
        text-align: left;
        color: #000000;
    }
        .van-cell__title{
            flex: none;
            word-wrap: break-word;
            width: 6.2em;
        }
         .van-cell__value{
        // font-size: 16px;
        // font-weight: Normal;
        //color:rgba(0,0,0,0.40)
        //color: #323233;
    }
    }
    // .van-cell__value{
    //     // font-size: 16px;
    //     // font-weight: Normal;
    //     //color:rgba(0,0,0,0.40)
    //     //color: #323233;
    // }
    .van-picker__toolbar{
        margin-bottom: 30px;
    }
//   }
</style>
